import React, { useRef, useState } from "react";
import styles from "./ins-module-view.module.scss";
import EchartModelGaugeProgress from "../echart/gauge-progress-element";
import XxtvCard from "../card/xxtv-card";
import AntdProgress from "@/antd/Progress/Porgress";






/**
 * 
 * @param {} param0 
 * @returns
 * @description 承保台数模块
 */
const XxInsModuleComponent1 = ({
    syCars = 0, // 商业险台数
    syNewCars = 0,// 新保台数（商业险）
    syRenewalCars = 0, // 续保台数（商业险）
    syRenewalSecCars = 0,// 续保次新车台数（商业险）
    syRenewalOldCars = 0,// 续保旧车台数（商业险）
    syReinsurCars = 0,// 转保台数（商业险）
    newCars = 0,// 新车销量
    targetCars = 0,// 目标台数
    newCarShare = 0,// 新车份额
    targetCarShare = 0,// 目标份额
    syRenewalRate = 0, // 续保率（商业险）
    syRenewalSecRate = 0, // 次新车续保率（商业险）
    syRenewalOldRate = 0, // 旧车续保率（商业险）
    syReRate = 0 // 续转保率（商业险）
}) => {
    const echartRef = useRef();//商业险ref
    const xbCarRef = useRef();//续保率




    return (
        <>
            <XxtvCard
                title="承保台数"
            >
                <div className={styles.center}>
                    <div className="center-box">
                        <div className="center-card">
                            <div className="center-card-header">
                                商业险台数
                            </div>
                            <div className="echart-box count-box" ref={echartRef}>
                                <div className="position-el">  {/* 定位 元素 */}

                                    {/**总数 */}
                                    <div className="count-box-1">
                                        <span className="value">{syCars}</span>
                                        <span className="label">总数</span>
                                    </div>
                                    <div className="count-box-small position-1  animate_irreMovemements2"> {/**新保 续保 转保用的 */}
                                        <span className="value">{syRenewalSecCars}</span>
                                        <span className="label">续保次新车</span>
                                    </div>
                                    <div className="count-box-small position-4 animate_irreMovemements4"> {/**新保 续保 转保用的 */}
                                        <span className="value">{syRenewalOldCars}</span>
                                        <span className="label">续保旧车</span>
                                    </div>
                                    <div className="count-box-small position-2 animate_irreMovemements3"> {/**新保 续保 转保用的 */}
                                        <span className="value">{syReinsurCars}</span>
                                        <span className="label">转保</span>
                                    </div>
                                    <div className="count-box-small position-3 animate_irreMovemements1"> {/**新保 续保 转保用的 */}
                                        <span className="value">{syNewCars}</span>
                                        <span className="label">新保</span>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                    {/* 新车 */}
                    <div className="center-box">

                        <div className="center-card">
                            <div className="center-card-header">
                                新车份额
                            </div>
                            <div className="echart-box" >
                                <div className="echart-center" >
                                    <EchartModelGaugeProgress
                                        color={"#7cffb2"}
                                        state={targetCarShare ? (newCarShare / targetCarShare * 100).toFixed(2) : 0}
                                        title="新车份额"
                                    />
                                </div>
                                <div className="info-more">
                                    <div className="info-item">
                                        <span className="icon"></span>
                                        <span className="label">实际份额：</span>
                                        <span className="label">{newCarShare}</span>
                                    </div>
                                    <div className="info-item">
                                        <span className="icon" style={{ backgroundColor: '#999' }}></span>
                                        <span className="label">目标份额：</span>
                                        <span className="label">{targetCarShare}</span>
                                    </div>
                                </div>

                            </div>

                        </div>
                    </div>
                    {/* 新车销量 */}
                    <div className="center-box box3">
                        <div className="center-card">
                            <div className="center-card-header">
                                新车销量
                            </div>
                            <div className="echart-box newCar-sericount" >
                                <AntdProgress
                                    size={[136, 20]}
                                    percent={targetCars <= 0 ? 0 : (newCars / targetCars * 100).toFixed(2)}
                                    strokeLinecap="round"
                                />
                                <div className="content">
                                    <div className="text-item">
                                        <div className="text-content">
                                            <div className="value">{newCars}</div>
                                            <div className="label">实际销量</div>
                                        </div>
                                    </div>
                                    <div className="text-item">
                                        <div className="text-content">
                                            <div className="value">{targetCars}</div>
                                            <div className="label">目标销量</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                    {/* 续保率 */}
                    <div className="center-box box4">

                        <div className="center-card">
                            <div className="center-card-header">
                                续保率（%）
                            </div>
                            <div className="echart-box" >
                                <div className="echart-center" ref={xbCarRef}>
                                    <EchartModelGaugeProgress
                                        color={"#4710d3"}
                                        state={syRenewalRate}
                                        title="续保率"
                                    />
                                </div>
                                <div className="info-more">
                                    <div className="info-item">
                                        <span className="icon color1"></span>
                                        <span className="label">次新车：</span>
                                        <span className="label">{syRenewalSecRate}</span>
                                    </div>
                                    <div className="info-item">
                                        <span className="icon color2"></span>
                                        <span className="label">旧&nbsp;&nbsp;&nbsp;车：</span>
                                        <span className="label">{syRenewalOldRate}</span>
                                    </div>
                                    <div className="info-item">
                                        <span className="icon color3"></span>
                                        <span className="label">续转保：</span>
                                        <span className="label">{syReRate}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </XxtvCard>
        </>
    )
}
export default XxInsModuleComponent1